<style>

    /* 系统基本样式 */
    .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        padding: 0.7rem 2rem;
        font-weight: 500;
        border-radius: 8px;
        transition: var(--transition);
    }

    .btn-primary:hover {
        background-color: #d62828;
        border-color: #d62828;
    }

    .btn-outline-secondary {
        padding: 0.7rem 2rem;
        font-weight: 500;
        border-radius: 8px;
    }

    /* 页面标题区 */
    .page-header {
        background-color: var(--primary-light);
        padding: 3rem 0 2rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e63946' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        z-index: 0;
    }

    .page-header .header-content {
        position: relative;
        z-index: 1;
    }

    .page-header .page-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 0.5rem;
    }

    .page-header .page-description {
        font-size: 1.1rem;
        color: var(--gray);
        max-width: 800px;
    }

    /* 协议内容区域 */
    .terms-section {
        margin-bottom: 4rem;
    }

    .terms-section .terms-container {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        padding: 3rem;
    }

    .terms-section .terms-header {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--light-gray);
    }

    .terms-section .terms-date {
        color: var(--gray);
        font-size: 0.95rem;
    }

    .terms-section .terms-content h3 {
        font-size: 1.5rem;
        color: var(--secondary);
        margin: 2rem 0 1rem;
        font-weight: 600;
    }

    .terms-section .terms-content h4 {
        font-size: 1.2rem;
        color: var(--secondary);
        margin: 1.5rem 0 0.8rem;
        font-weight: 600;
    }

    .terms-section .terms-content p {
        margin-bottom: 1rem;
        color: #555;
    }

    .terms-section .terms-content ul {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
    }

    .terms-section .terms-content li {
        margin-bottom: 0.5rem;
        color: #555;
    }

    .terms-section .highlight {
        color: var(--primary);
        font-weight: 500;
    }

    /* 条款导航 */
    .terms-nav {
        position: sticky;
        top: 2rem;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
        height: fit-content;
    }

    .terms-nav .nav-title {
        font-weight: 600;
        color: var(--secondary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary-light);
    }

    .terms-nav .terms-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .terms-nav .terms-links li {
        margin-bottom: 0.8rem;
    }

    .terms-nav .terms-links a {
        color: var(--gray);
        text-decoration: none;
        transition: var(--transition);
        display: block;
        padding: 0.3rem 0;
        font-size: 0.95rem;
    }

    .terms-nav .terms-links a:hover, .terms-nav .terms-links a.active {
        color: var(--primary);
        padding-left: 5px;
    }

    /* 确认区域 */
    .terms-actions {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid var(--light-gray);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .terms-actions .action-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
    }


    /* 响应式调整 */
    @media (max-width: 992px) {
        .terms-nav {
            position: static;
            margin-bottom: 2rem;
        }

        .terms-section .terms-container {
            padding: 2rem;
        }
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 1.8rem;
        }

        .terms-actions {
            flex-direction: column;
            align-items: flex-start;
        }

        .terms-section .terms-container {
            padding: 1.5rem;
        }
    }
</style>


<!-- 页面标题区 -->
<section class="page-header">
    <div class="container">
        <div class="header-content">
            <h1 class="page-title">服务协议</h1>
            <p class="page-description">
                欢迎使用红包社交平台服务。在使用本平台前，请您仔细阅读以下服务协议条款。您的使用行为将被视为对本协议的接受。
            </p>
        </div>
    </div>
</section>

<!-- 协议内容 -->
<section class="terms-section">
    <div class="container">
        <div class="row gap-6">
            <!-- 条款导航 -->
            <div class="col-lg-3 d-none d-lg-block">
                <div class="terms-nav">
                    <h3 class="nav-title">条款导航</h3>
                    <ul class="terms-links">
                        <li><a href="#definition" class="active">定义</a></li>
                        <li><a href="#service">服务内容</a></li>
                        <li><a href="#account">账号注册与管理</a></li>
                        <li><a href="#user-obligation">用户义务</a></li>
                        <li><a href="#redpacket-rules">红包使用规则</a></li>
                        <li><a href="#intellectual">知识产权</a></li>
                        <li><a href="#privacy">隐私保护</a></li>
                        <li><a href="#disclaimer">免责声明</a></li>
                        <li><a href="#modification">协议修改</a></li>
                        <li><a href="#termination">服务终止</a></li>
                        <li><a href="#applicable">法律适用</a></li>
                        <li><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
            </div>

            <!-- 协议正文 -->
            <div class="col-lg-9">
                <div class="terms-container">
                    <div class="terms-header">
                        <h2>红包社交平台服务协议</h2>
                        <p class="terms-date">生效日期：2023年1月1日 | 版本号：V2.0</p>
                    </div>

                    <div class="terms-content">
                        <p>
                            欢迎您使用红包社交平台（以下简称"本平台"）提供的各项服务。本协议是您与本平台经营者之间就使用本平台服务所订立的协议。请您在使用本平台前仔细阅读本协议全部内容，特别是加粗或高亮显示的条款。您对本平台的使用行为将被视为您已接受本协议的全部内容。</p>

                        <h3 id="definition">一、定义</h3>
                        <p>1.1 <span class="highlight">红包社交平台</span>：指由我们运营的，提供红包领取、分享、使用及相关社交服务的互联网平台，包括网站、移动应用程序等。</p>
                        <p>1.2 <span class="highlight">用户</span>：指注册并使用本平台服务的自然人、法人或其他组织。</p>
                        <p>1.3 <span class="highlight">红包</span>：指商家或本平台在本平台上发布的，可用于特定消费场景的优惠券、折扣券、现金券等优惠凭证。</p>
                        <p>1.4 <span class="highlight">商家</span>：指在本平台上发布红包或提供商品/服务的法人或个体经营者。</p>

                        <h3 id="service">二、服务内容</h3>
                        <p>2.1 本平台为用户提供以下主要服务：</p>
                        <ul>
                            <li>红包信息展示、搜索、领取和使用服务</li>
                            <li>红包分享、评论、收藏等社交互动服务</li>
                            <li>个人红包管理、消费记录查询服务</li>
                            <li>基于地理位置的红包推荐服务</li>
                            <li>本平台不时推出的其他相关服务</li>
                        </ul>
                        <p>2.2 本平台保留随时变更、暂停或终止部分或全部服务的权利，如有相关变动，将通过平台公告等方式通知用户。</p>

                        <h3 id="account">三、账号注册与管理</h3>
                        <p>3.1 用户在使用本平台服务前，需注册一个平台账号。注册时，用户应提供真实、准确、完整的信息，并及时更新相关信息以保证其有效性。</p>
                        <p>3.2 用户应妥善保管自己的账号和密码，对通过该账号进行的所有活动和行为负责。如发现账号被盗用或异常使用，应立即通知本平台。</p>
                        <p>3.3 一个用户只能注册和使用一个平台账号，禁止多账号注册、买卖或租赁账号等行为。</p>
                        <p>3.4 用户如长期不使用账号，本平台有权根据实际情况收回该账号，以保证平台资源的合理利用。</p>

                        <h3 id="user-obligation">四、用户义务</h3>
                        <p>4.1 用户在使用本平台服务时，应遵守法律法规、社会公德及本协议约定，不得利用本平台从事任何违法违规活动。</p>
                        <p>4.2 禁止从事以下行为：</p>
                        <ul>
                            <li>发布或传播违法、色情、暴力、侮辱、诽谤等有害信息</li>
                            <li>侵犯他人知识产权、隐私权等合法权益</li>
                            <li>利用技术手段或其他方式干扰、破坏本平台正常运行</li>
                            <li>恶意领取、倒卖红包或利用红包进行欺诈活动</li>
                            <li>其他违反法律法规或本协议的行为</li>
                        </ul>
                        <p>4.3 用户应尊重商家和其他用户的合法权益，理性使用平台服务，文明互动。</p>

                        <h3 id="redpacket-rules">五、红包使用规则</h3>
                        <p>5.1 红包领取：用户需符合红包领取条件方可领取，每个红包的具体领取条件以红包详情页为准。部分红包可能有领取数量限制。</p>
                        <p>5.2 红包使用：每个红包都有特定的使用规则，包括适用商户、适用商品/服务、有效期、使用门槛等，用户应在使用前仔细阅读。</p>
                        <p>5.3 红包有效期：红包自领取之日起在规定期限内有效，逾期自动失效，不予补发。</p>
                        <p>5.4 红包不可兑换现金，不可转赠（除非有特别说明），不找零。</p>
                        <p>5.5 如因商家原因导致红包无法使用，用户可向本平台投诉，本平台将协助用户与商家协商解决。</p>

                        <h3 id="intellectual">六、知识产权</h3>
                        <p>6.1 本平台所有内容，包括但不限于文字、图片、商标、软件、技术等，其知识产权归本平台或相关权利人所有。</p>
                        <p>6.2 未经本平台书面许可，用户不得擅自使用、复制、传播、修改本平台的任何内容。</p>
                        <p>6.3 用户在本平台发布的内容，授予本平台免费、非独家、可转授权的使用权，包括但不限于存储、展示、传播等。</p>

                        <h3 id="privacy">七、隐私保护</h3>
                        <p>7.1 本平台重视用户隐私保护，将按照《隐私政策》收集、使用和保护用户个人信息。</p>
                        <p>7.2 用户同意本平台在符合法律法规及《隐私政策》的前提下，为提供服务之目的收集和使用其个人信息。</p>
                        <p>7.3 本平台将采取合理措施保护用户信息安全，但不对信息传输的绝对安全性做出承诺。</p>

                        <h3 id="disclaimer">八、免责声明</h3>
                        <p>8.1 本平台仅提供红包信息展示和技术服务，红包的实际内容和服务由商家提供，本平台不对商家提供的商品或服务质量做出保证。</p>
                        <p>8.2 因不可抗力、第三方原因或技术故障等导致用户无法使用本平台服务的，本平台不承担责任，但将尽力协助解决。</p>
                        <p>8.3 用户因使用本平台服务或依赖本平台上的信息而遭受的任何损失，本平台不承担责任，除非该损失是由于本平台的故意或重大过失造成的。</p>
                        <p>8.4 用户之间因使用本平台服务产生的纠纷，由用户自行解决，本平台可提供必要的协助。</p>

                        <h3 id="modification">九、协议修改</h3>
                        <p>9.1 本平台有权根据法律法规变化或业务发展需要，对本协议进行修改。</p>
                        <p>9.2 协议修改后，将通过平台公告等方式通知用户。用户如继续使用本平台服务，视为接受修改后的协议；如不接受，应停止使用本平台服务。</p>

                        <h3 id="termination">十、服务终止</h3>
                        <p>10.1 用户可随时申请注销账号，终止使用本平台服务。</p>
                        <p>10.2 如用户违反本协议约定，本平台有权暂停或终止向其提供服务，并保留追究其责任的权利。</p>
                        <p>10.3 服务终止后，本协议中关于知识产权、免责声明、法律适用等条款仍然有效。</p>

                        <h3 id="applicable">十一、法律适用与争议解决</h3>
                        <p>11.1 本协议适用中华人民共和国法律（不包括香港、澳门特别行政区和台湾地区的法律）。</p>
                        <p>11.2 因本协议引起的或与本协议有关的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均有权向本平台所在地有管辖权的人民法院提起诉讼。</p>

                        <h3 id="contact">十二、联系我们</h3>
                        <p>12.1 如您对本协议有任何疑问，可通过以下方式联系我们：</p>
                        <ul>
                            <li>客服电话：400-888-9999</li>
                            <li>客服邮箱：service@hongbaosheqiao.com</li>
                            <li>平台在线客服：工作日 9:00-18:00</li>
                        </ul>

                        <p>12.2 本协议构成双方就使用本平台服务所达成的完整协议，取代之前的所有口头或书面协议。</p>
                    </div>

                    <!-- 确认区域 -->
                    <div class="terms-actions">
                        <div class="action-checkbox">
                            <input class="form-check-input" type="checkbox" id="agreeTerms">
                            <label class="form-check-label" for="agreeTerms">
                                我已阅读并同意上述服务协议
                            </label>
                        </div>

                        <div class="action-buttons">
                            <button type="button" class="btn btn-outline-secondary me-2" id="cancelBtn">取消</button>
                            <button type="button" class="btn btn-primary" id="confirmBtn" disabled>确认同意</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 条款导航链接点击事件
		const termLinks = document.querySelectorAll('.terms-links a');
		termLinks.forEach(link => {
			link.addEventListener('click', function (e) {
				e.preventDefault();

				// 移除所有链接的active类
				termLinks.forEach(l => l.classList.remove('active'));
				// 为当前点击的链接添加active类
				this.classList.add('active');

				// 平滑滚动到对应条款
				const targetId = this.getAttribute('href');
				const targetElement = document.querySelector(targetId);
				if (targetElement) {
					window.scrollTo({
						top: targetElement.offsetTop - 100,
						behavior: 'smooth'
					});
				}
			});
		});

		// 协议同意复选框
		const agreeCheckbox = document.getElementById('agreeTerms');
		const confirmBtn = document.getElementById('confirmBtn');

		agreeCheckbox.addEventListener('change', function () {
			confirmBtn.disabled = !this.checked;
		});

		// 确认按钮点击事件
		confirmBtn.addEventListener('click', function () {
			alert('您已同意服务协议。');
			// 在实际应用中，这里可以记录用户的同意状态
		});

		// 取消按钮点击事件
		document.getElementById('cancelBtn').addEventListener('click', function () {
			if (confirm('您确定要取消吗？某些功能可能无法使用。')) {
				// 在实际应用中，这里可以返回上一页或执行其他操作
				window.history.back();
			}
		});

		// 移动端条款导航处理 - 为小屏幕设备添加简单的展开/折叠功能
		if (window.innerWidth < 992) {
			const createMobileNav = () => {
				const mobileNav = document.createElement('div');
				mobileNav.className = 'terms-nav mb-4';
				mobileNav.innerHTML = `
                        <h3 class="nav-title d-flex justify-content-between align-items-center">
                            条款导航
                            <button class="btn btn-sm btn-outline-secondary" id="toggleNav">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </h3>
                        <ul class="terms-links" id="mobileTermsLinks" style="display: none;">
                            ${document.querySelector('.terms-links').innerHTML}
                        </ul>
                    `;

				const termsContainer = document.querySelector('.terms-container');
				termsContainer.parentNode.insertBefore(mobileNav, termsContainer);

				// 添加点击事件
				document.getElementById('toggleNav').addEventListener('click', function () {
					const links = document.getElementById('mobileTermsLinks');
					const icon = this.querySelector('i');

					if (links.style.display === 'none') {
						links.style.display = 'block';
						icon.classList.remove('fa-chevron-down');
						icon.classList.add('fa-chevron-up');
					} else {
						links.style.display = 'none';
						icon.classList.remove('fa-chevron-up');
						icon.classList.add('fa-chevron-down');
					}
				});

				// 重新绑定链接事件
				document.querySelectorAll('#mobileTermsLinks a').forEach(link => {
					link.addEventListener('click', function (e) {
						e.preventDefault();

						// 关闭导航
						document.getElementById('mobileTermsLinks').style.display = 'none';
						document.querySelector('#toggleNav i').classList.remove('fa-chevron-up');
						document.querySelector('#toggleNav i').classList.add('fa-chevron-down');

						// 平滑滚动
						const targetId = this.getAttribute('href');
						const targetElement = document.querySelector(targetId);
						if (targetElement) {
							window.scrollTo({
								top: targetElement.offsetTop - 100,
								behavior: 'smooth'
							});
						}
					});
				});
			};

			createMobileNav();
		}
	});
</script>

